<template>
	<div class="container">
		<div class="electronic-header">
			<div class="header-line"></div>
			<div class="header-info">
				<p>红星国际广场</p>
				<p>渠道到访电子确认单</p>
				<div class="info-division"></div>
				<p class="oddNumbers">平台统一单号：D87894502KJ</p>
			</div>
		</div>
		<div class="info-list">
			<div class="info-title">确认信息</div>
			<ul class="info-list-item">
				<li>
					<div class="item-label">确认时间：</div>
					<div class="item-content">2017-09-09 12:29:10</div>
				</li>
				<li>
					<div class="item-label">确认人：</div>
					<div class="item-content">系统自动确认</div>
				</li>
			</ul>
			<p class="prompt">客户确认到访后，30天内为认购，推荐自动无效</p>
		</div>
		<div class="info-list">
			<div class="info-title">客户信息</div>
			<ul class="info-list-item">
				<li>
					<div class="item-label">姓名：</div>
					<div class="item-content">李月</div>
				</li>
				<li>
					<div class="item-label">性别：</div>
					<div class="item-content">女</div>
				</li>
				<li>
					<div class="item-label">电话：</div>
					<div class="item-content">18912657849</div>
				</li>
			</ul>
		</div>
		<div class="info-list">
			<div class="info-title">渠道信息</div>
			<ul class="info-list-item">
				<li>
					<div class="item-label">经纪人：</div>
					<div class="item-content">王凯</div>
				</li>
				<li>
					<div class="item-label">手机：</div>
					<div class="item-content">13614587956</div>
				</li>
				<li>
					<div class="item-label">身份证：</div>
					<div class="item-content">310229199012417865</div>
				</li>
				<li>
					<div class="item-label">渠道公司：</div>
					<div class="item-content">中介公司-其他</div>
				</li>
			</ul>
		</div>
		<div class="promptInfo"><i class="fa fa-exclamation-circle"></i>您可以下载PDF格式电子单并自动打印或将此页面分享给财务等相关人员备案</div>
		<div class="report-button">
			<mt-button size="large" type="danger">下载</mt-button>
			<mt-button size="large"  plain>分享</mt-button>
		</div>
	</div>
</template>
<script>
	export default {
		components:{
			
		},
		data () {
		    return {
		      	
		    }
		},
		computed: {

		},
		methods :{
			
		}
	}
</script>
<style scoped>
	.container{padding: 10px;}
	.electronic-header{background-color: #eb6100;margin-bottom: 10px;}
	.header-line{height: 5px;background-color: #ad4700;}
	.header-info{padding: 16px 0 10px;text-align: center;color: #fff;font-size: 16px;}
	.header-info p{line-height: 30px;}
	.info-division{background: url(../assets/images/line.jpg) no-repeat left top;height: 14px;background-size: 100% auto;}
	.header-info .oddNumbers{font-size: 14px;color: #ffceab;line-height: 20px;}

	.info-list{border-top: 2px solid #eb6100;background-color: #fff;padding-bottom: 12px;margin-bottom: 20px; -webkit-box-shadow:0px 5px 10px -2px #ccc; -moz-box-shadow:0px 5px 10px -2px #ccc; box-shadow:0px 5px 10px -2px #ccc;}
	.info-title{padding: 0 10px;line-height: 34px;border-bottom: 1px solid #cdcdcd;}
	.info-list-item{padding: 10px 10px 0;}
	.info-list-item li{padding-left: 70px;position: relative;line-height: 22px;margin-bottom: 6px;}
	.item-label{position: absolute;left: 0;width: 70px;overflow: hidden;}
	.item-content{min-height: 22px;}
	.info-list .prompt{font-size: 12px;color: #999;padding: 0 10px;padding-top: 4px;}
	.promptInfo{position: relative;width: 230px;text-align: center;font-size: 12px;margin:  0 auto;padding-left: 22px;line-height: 20px;}
	.promptInfo .fa{position: absolute;left: 0;color: #eb6100;font-size: 16px;}
	.report-button{padding: 0 10px;}
	.report-button .mint-button--danger{background-color: #eb6100;margin-top: 20px;}
</style>